<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>在线投票系统</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <ul>
        <li>
            <img src="images/1.jpeg" alt="">
            <div class="mask">
                <h1>路飞</h1>
                <p>草帽大船团的船长，极恶的世代之一</p>
            </div>
        </li>
        <li>
            <img src="images/2.jpeg" alt="">
            <div class="mask">
                <h1>索隆</h1>
                <p>使用三把刀战斗的三刀流剑士，极恶的世代之一，也是两年前集结香波地群岛的十一超新星之一</p>
            </div>
        </li>

        <li>
            <div id="user">个人信息</div>
        </li>
    </ul>

    <h1></h1>

    <script src="jquery.js"></script>

    <script>
        //获取用户信息
        $(function () {
            $.ajax({
                url: "/user/userInfo",
                type: "get",
                success: function (data) {
                    let divSS = document.querySelector("#user")
                    divSS.innerHTML = "用户：" + '<h1>' + data.date.account + '</h1>' + "欢迎来到在线投票"
                },
                error: function () {
                    alert("获取用户信息失败")
                }
            })
        })

        //创建webSocket实例
        let web = new WebSocket('ws://127.0.0.1:8080/findMatch')

        web.onopen = function () {
            console.log("连接建立")
        }
        web.onerror = function () {
            console.log("连接异常")
        }
        web.onclose = function () {
            console.log("连接关闭")
        }
        window.onbeforeunload = function () {
            //监听页面关闭事件 页面关闭 手动关闭连接
            web.close()
        }


        //处理服务器返回的数据
        web.onmessage = function (e) {
            console.log("收到消息: " + e.data)
        }




    </script>

</body>

</html>